import React, {memo, useCallback} from 'react';
import {
  View,
  Text,
  StyleSheet,
  NativeModules,
  ImageBackground,
  Dimensions,
  TouchableWithoutFeedback,
} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import PatIcon from '../base/PatIcon';
import {useNavigation} from '@react-navigation/native';
import Colors from '../../utils/Colors';
import LazyloadImg from '../../component/base/LazyloadImg';
import {useTranslation} from 'react-i18next';
import style from '../product/ProductDetailHeader.style';
const HEIGHT = NativeModules.StatusBarManager.HEIGHT;
const windowWidth = Dimensions.get('window').width;

const AccountTop = () => {
  const {t} = useTranslation();
  const isLogin = useSelector(state => state.user.isLogin);
  const name = useSelector(state => state.user.name);
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const onChange = useCallback(() => {
    console.log(123);
  }, []);
  const onLogin = useCallback(() => {
    if (isLogin) {
      // 登录了
    } else {
      dispatch({type: 'user/setShowLoginRegister', payload: true});
    }
  }, [isLogin, dispatch]);
  return (
    <ImageBackground
      source={require('../../assets/image/icon-user-bg.png')}
      style={styles.bgImg}>
      <TouchableWithoutFeedback onPress={onLogin}>
        <View style={styles.userBox}>
          <LazyloadImg
            style={styles.userImg}
            source={require('../../assets/image/avatar.png')}
          />
          <View style={styles.userName}>
            <Text style={{color: Colors.white}}>
              {isLogin ? name : '登录/注册'}
            </Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
      <View style={styles.vourchBox}>
        <TouchableWithoutFeedback onPress={onChange}>
          <View style={styles.vourchItem}>
            <Text style={styles.tText}>{isLogin ? 21 : '0'}</Text>
            <Text style={styles.bText}>{t('account.rewards')}</Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback onPress={onChange}>
          <View style={styles.vourchItem}>
            <Text style={styles.tText}>{isLogin ? 'HKD$1003' : '0'}</Text>
            <Text style={styles.bText}>{t('account.wallet')}</Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback onPress={onChange}>
          <View style={styles.vourchItem}>
            <Text style={styles.tText}>{isLogin ? '2003' : '0'}</Text>
            <Text style={styles.bText}>{t('account.patPoints')}</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
      <ImageBackground
        source={require('../../assets/image/gift-get-bg.png')}
        style={styles.vipBox}>
        <TouchableWithoutFeedback onPress={onChange}>
          <View>
            <View style={styles.vipBoxTop}>
              <Text style={styles.vipText}>{t('account.vip_benefits')}</Text>
              <View style={styles.vipRight}>
                <PatIcon name="arrow-right" size={12} color={Colors.white} />
              </View>
            </View>
            <View style={styles.vipBoxbottom}>
              <View style={styles.vipBottomLeft}>
                <Text style={styles.vipBottomLeftText}>
                  {/* <PatIcon name="percent" size={12} color={Colors.white} /> */}
                  {t('account.new_vip_gift')}
                </Text>
                <Text style={styles.vipBottomLeftText2}>{'九五折优惠券'}</Text>
              </View>
              <View style={styles.vipBottomRight}>
                <Text style={styles.vipBottomLeftText}>
                  <PatIcon
                    name="change-currency"
                    size={14}
                    color={Colors.white}
                  />
                  {t('account.monthly_coupon')}
                </Text>
                <Text style={styles.vipBottomLeftText2}>{'最高减$100'}</Text>
              </View>
            </View>
          </View>
        </TouchableWithoutFeedback>
      </ImageBackground>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  bgImg: {
    width: '100%',
    height: 240,
    paddingTop: HEIGHT + 40,
    marginBottom: 30,
  },
  userBox: {
    paddingLeft: 10,
    paddingRight: 10,
    width: '100%',
    height: 50,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    position: 'relative',
  },
  userImg: {
    width: 50,
    height: 50,
    borderRadius: 50,
  },
  userName: {
    marginLeft: 20,
  },
  vourchBox: {
    display: 'flex',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    flexDirection: 'row',
  },
  vourchItem: {
    marginTop: 5,
    marginLeft: 10,
    marginRight: 10,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
  },
  tText: {
    color: Colors.white,
    fontSize: 18,
  },
  bText: {
    color: Colors.white,
    fontSize: 12,
  },
  vipBox: {
    height: 80,
    overflow: 'hidden',
    position: 'absolute',
    left: 20,
    right: 20,
    borderRadius: 10,
    bottom: -10,
    paddingTop: 5,
    paddingLeft: 20,
    paddingRight: 10,
  },
  vipBoxTop: {
    height: 20,
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
  },
  vipText: {
    color: Colors.white,
    fontSize: 10,
  },
  vipRight: {
    color: Colors.white,
    borderRadius: 50,
    width: 15,
    height: 15,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  vipBoxbottom: {
    height: 35,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
  },
  vipBottomLeft: {
    flex: 1,
    borderRightWidth: 1,
    borderRightColor: Colors.white,
  },
  vipBottomRight: {
    paddingLeft: 15,
    flex: 1,
  },
  vipBottomLeftText: {
    color: Colors.white,
    fontSize: 14,
  },
  vipBottomLeftText2: {
    marginTop: 3,
    color: Colors.white,
    fontSize: 10,
  },
});

export default AccountTop;
